<template>
    <div class="oolong-form-background">
      <div class="oolong-form-padding">
        <p class="oolong-titile">
          <span>{{titleName}}</span>
        </p>
        <p>
          <span class="oolong-Prompt" v-show="isPrompt.userShow">账号或密码错误,请重新输入</span>
          <span class="oolong-Prompt" v-show="isPrompt.codeShow">验证码错误,请重新输入</span>
        </p>
        <p>
          <i class="oolong-user"></i>
          <!--<Icon type="ios-person oolong-user" :size="40"></Icon>-->
          <i class="oolong-reset" v-show="isUserResetShow" @click="resetUser"></i>
          <input class="oolong-input-account input" type="text" placeholder="请输入账号" v-model="user"
                 @focus="resetPrompt"/>

        </p>
        <p>
          <i class="oolong-password"></i>
          <i class="oolong-reset" v-show="isPasswordResetShow" @click="resetPassword"></i>
          <input class="oolong-input-account input" type="password" placeholder="请输入密码" v-model="password"
                 @focus="resetPrompt"/>
        </p>
        <p>
          <a class="oolong-button oolong-button-disabled button is-primary is-outlined buttonwidth" v-if="isDisabled">
            <span class="oolong-button-font">登录</span></a>
          <a class="oolong-button oolong-button-available  button is-primary is-outlined buttonwidth" v-else
             @click="login"><span class="oolong-button-font">登录</span></a>
        </p>
        <hr/>
      </div>
    </div>
</template>
<style lang="scss" scoped>
  @import "../../node_modules/bulma/css/bulma.css";
  //表单背景
  $form-background: #ffffff;
  //间距20px
  $spacing: 20px;

    //吊带
    .oolong-rope {
      //定位
      position: absolute;
      left: 70%;
      width: 21%;
      height: 15%;
      border: none;
      //重叠优先级
      z-index: 100;
    }
    //表单框
    .oolong-form-background {
      //边框样式
      border-style: solid;
      border-width: 1px;
      border-color: #cbcdca;
      //定位
      position: absolute;
      top: 14.3%;
      /* left: 67%;*/
      //todo
      left: 38%;
      width: 27%;
      /*height: 35%;*/
      background-color: $form-background;
      //重叠优先级
      z-index: 80;
      //表单
      .oolong-form-padding {

        //内边距
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 10%;
        padding-right: 10%;

        //表单标题
        .oolong-titile {
          font-size: 16px;
          font-weight: 700;
          color: #48babb;
        }
        //提示信息
        .oolong-Prompt {
          color: #fa5151;
          font-size: 14px;
          margin-top: 10px;
        }
        //账号输入input
        .oolong-input-account {
          padding-left: 50px;
          width: 100%;
          height: 40px;
          margin-top: $spacing
        }
        //验证码模块
        .oolong-verification-code {
          margin-top: 10px;

          //验证码信息提示
          .oolong-code-information {
            display: inline-block;
            height: 40px;
            line-height: 40px;
          }
          //验证码
          .oolong-code {
            margin-left: 10px;
            width: 38%;
            height: 40px;
          }
          //验证码图片
          .oolong-code-img {
            vertical-align: top;
            margin-left: 10px;
            width: 25.5%;
            height: 40px;
            /* border: none;*/
            border-color: #cccccc;
            border-radius: 4px 4px 4px 4px;
            /* !* 必需 *!
             .expand-transition {
               transition: all .3s ease;
               background-color: #eee;
               overflow: hidden;
             }
             !* .expand-enter 定义进入的开始状态 *!
             !* .expand-leave 定义离开的结束状态 *!
             .expand-enter, .expand-leave {
               height: 0; !*padding: 0 10px;*!
               opacity: 0;
             }*/
          }
        }
        //提交按键
        .oolong-button {
          width: 100%;
          height: 40px;
          margin-top: $spacing;
          border: none;
          .oolong-button-font {
            font-size: 14px;
            color: #ffffff;
          }
        }
        //按键可以用颜色
        .oolong-button-available {
          background: #48babb;
        }
        //按键不可用颜色
        .oolong-button-disabled {
          background: #cccccc;
        }
        //用户图片背景图
        .oolong-account-background {
          position: absolute;
          color: #cccccc;
          height: 40px;
          width: 40px;
          //重叠优先级
          z-index: 5;
        }
        //用户图片
        .oolong-user {
          border-radius: 4px 0px 0px 4px;
          margin-top: 20px;
          position: absolute;
          background: url('../resources/img/admin-template/user.png') no-repeat;
         /* background:#cccccc;*/
          height: 40px;
          width: 40px;
          //重叠优先级
          z-index: 5;
        }
        //密码图片
        .oolong-password {
          border-radius: 4px 0px 0px 4px;
          margin-top: 20px;
          position: absolute;
          background: url('../resources/img/admin-template/password.png') no-repeat;
          height: 40px;
          width: 40px;
          //重叠优先级
          z-index: 100;
        }
        //重置图片
        .oolong-reset {
          left: 83%;
          margin-top: 28px;
          position: absolute;
          background: url('../resources/img/admin-template/reset.png') no-repeat;
          height: 40px;
          width: 40px;
          //重叠优先级
          z-index: 100;
        }
      }

    }


</style>
<script>
  import Icon from '../components/icon'
  export default{
    props:{
      titleName:{
      type: String,
      default: ""
     },
      //登录信息
      user:{
        type: String,
        default: ""
      },
      password:{
        type: String,
        default: ""
      },
      verificationCode:{
        type: String,
        default: ""
      }
    },
    data(){
      return {
        //提示信息
        isPrompt: {
          userShow: false,
          codeShow: false,
          //重置图片提示状态
          userResetShow: false,
          passwordResetShow: false,
          //按键可用状态
          disabled: true
        },
        //验证码
        // getKaptchaImage: './entrance/getKaptchaImage?',
        getKaptchaImage: this.url+this.imgUrl,
        show: true,
      }
    },
    components: {
      Icon
    },
    computed: {
      //重置图片隐藏/显示功能
      isUserResetShow(){
        if (this.user.length > 0) {
          return this.isPrompt.userResetShow = true;
        } else {
          return this.isPrompt.userResetShow = false;
        }
      },
      isPasswordResetShow(){
        if (this.password.length > 0) {
          return this.isPrompt.passwordResetShow = true;
        } else {
          return this.isPrompt.passwordResetShow = false;
        }
      },
      //按键可用状态
      isDisabled(){
        if (this.user.length > 0 && this.password.length > 0) {
          return this.isPrompt.disabled = false;
        } else {
          return this.isPrompt.disabled = true;
        }
      },
      //验证码显示
      isVerificationCode(){
        return this.getKaptchaImage + Math.floor(Math.random() * 100);
      }
    },
    methods: {
      //刷新验证码
      changeCode: function () {
        this.getKaptchaImage = "";
        this.getKaptchaImage = this.url+this.imgUrl;
      },
      //账号重置
      resetUser(){
        this.user = "";
      },
      //密码重置
      resetPassword(){
        this.password = "";
      },
      //隐藏提示信息
      resetPrompt(){
        this.isPrompt.userShow = false;
        this.isPrompt.codeShow = false
      },

      login(){
        this.$emit('on-click',this);
      },
    },
  }
</script>
